<template>
  <div style="width:100%;">
    <!--显示table上面的工具栏（按钮、搜索栏），还可以自定义插槽内容-->
    <el-row v-if="param.showToolBar" style="text-align:right;line-height:30px">
      <el-col :span="16" style="text-align: left">
        <el-button v-for="row in param.toolButtons" :key="row.id" class="tool_button" @click="row.operateFunction()" :type="row.type" size="mini" :icon="row.icon" v-if="row.permission === '' ? true : (param.permissions.indexOf(row.permission)>0)" plain>{{row.title}}</el-button>
        <slot name="tool_button_append"></slot>
      </el-col>
      <el-col :span="8">
        <div>
          <el-input placeholder="请输入内容" v-model="searchValue" class="input-with-select"  size="mini" @keyup.enter.native="search">
            <el-select v-model="searchtype" slot="prepend" placeholder="请选择" style="width:100px">
              <el-option label="全部" value="0" ></el-option>
              <el-option v-for="searchRow in param.searchRows" :key="searchRow.value" :label="searchRow.label" :value="searchRow.value"></el-option>
            </el-select>
            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
          </el-input>
        </div>
      </el-col>
    </el-row>
    <!--只显示table上面的搜索栏-->
    <div v-if="param.showSearch" style="width:100%;height:20px;">

          <div :style="{'width':param.searchWidth,'float':'right','margin-top':'5px'}">
            <el-input placeholder="请输入内容" v-model="searchValue" class="input-with-select"  size="mini" @keyup.enter.native="search">
              <el-select v-model="searchtype" slot="prepend" placeholder="请选择">
                <el-option label="全部" value="0" ></el-option>
                <el-option v-for="searchRow in param.searchRows" :key="searchRow.value" :label="searchRow.label" :value="searchRow.value"></el-option>
              </el-select>
              <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
            </el-input>
          </div>

    </div>
    <div >
      <el-table
        ref="organizationUserTable"
        :data="datas"
        tooltip-effect="dark"
        :stripe="true"
        :border="true"
        size="mini"
        @selection-change="changeFun"
        @row-click="rowClick"
        empty-text="没有数据"
        header-row-class-name="organizationTableHeadCss"
        :highlight-current-row="param.highlight"
        style="width: 100%;margin-top:20px;">

          <el-table-column v-if="param.showBox"
                           type="selection"
                           width="55">
          </el-table-column>

          <el-table-column
            label="序号"
            type="index"
            :index="indexMethod"
          >
          </el-table-column>

        <el-table-column  v-for="row in param.rows" :key="row.prop"  :label="row.label" :prop="row.prop" :width="row.width" :formatter="row.formatter">
        </el-table-column>

        <el-table-column
          label="操作"
          :width="param.operateRow.width" v-if="param.showOperateRow">
          <template slot-scope="scope">
            <!--<i @click="operateButton.operateFunction(scope.row)" v-for="operateButton in param.operateButtons" :key="operateButton.icon" :operateButton="operateButton" ></i>-->
            <i @click="operateButton.operateFunction(scope.row)" v-for="operateButton in param.operateButtons" :key="operateButton.icon" :operateButton="operateButton" v-show="operateButton.permission === '' ? true : (param.permissions.indexOf(operateButton.permission)>0)">
              <icon :name="operateButton.icon" :scale="2" class="pointcss" ></icon> &nbsp;&nbsp;
            </i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="margin-top:10px;text-align: center">
      <!--v-show="permissions.indexOf(operateButton.permission)>0"-->
      <el-pagination :small="param.nvsmall == null ? nvsmall : param.nvsmall" background :layout="param.nvlayout==null?nvlayout:param.nvlayout" :total="totals" :current-page="currentPage" v-on:current-change="pageChange">
      </el-pagination>
    </div>
  </div>
</template>
<script >
  import { tfGet, yfuPost } from '@/utils/request.js'
  import global_ from '@/utils/global.vue'
//  import store from '@/store'
  export default {
    props: ['param'],
    data () {
      return {
        permissions: this.sessiongetString('permissions'),
        datas: [],
        currentPage: 1,
        totals: 0,
        cheeckedDatas: [],
        searchValue: '',
        searchtype: '0',
        nvsmall: false,
        nvlayout: 'total,prev, pager, next,jumper'
      }
    },
    watch: {
      refresh: function () {
        // 响应刷新
        this.refreshTable()
      }
    },
    // 进入时初始化TABLE
    created () {
      if (this.param.noCreatedRequest === 1) {
        return
      }
      this.initTable()
    },
    methods: {
      indexMethod (index) {
        index += 1
        let cp = this.currentPage - 1
        let indexValue = index + cp * 10
        return indexValue
      },
      initTable () {
        this.refreshTable()
      },
      // 赋值
      assignData (data) {
        if (Array.isArray(data)) {
          this.datas = data
        } else {
          if (Array.isArray(data.datas)) {
            this.datas = data.datas
          } else {
            this.datas = data.list
          }
          this.currentPage = data.currentPage
          this.totals = data.totals
        }
      },
      // 得到数据
      getAllDatas (param1) {
        let cThis = this
        if (global_.isLocalServer) {
          tfGet(this.param.url, function (data) {
            cThis.assignData(data)
          })
        } else {
          yfuPost(this.param.baseURL, this.param.url, param1, function (data) {
            cThis.assignData(data)
          })
        }
      },
      // 页数改变时调用
      pageChange (toPage, outerParam) {
        if (toPage < 1) {
          toPage = 1
        }
        let param1 = this.createParam(outerParam)
        param1.currentPage = toPage
        param1.pageSize = 10
        console.log(param1)
        this.getAllDatas(param1)
      },
      refreshTable (outerParam) {
        this.pageChange(1, outerParam)
      },
      refreshTableClearSearch (outerParam) {
        this.searchValue = ''
        this.pageChange(1, outerParam)
      },
      //  点击搜索时调用
      search () {
        if (this.searchtype === '0') {
          let params = {}
          params.all = this.searchValue
          params.currentPage = 1
          params.pageSize = 10
          this.getAllDatas(params)
        } else {
          let params = {}
          params[this.searchtype] = this.searchValue
          params.currentPage = 1
          params.pageSize = 10
          this.getAllDatas(params)
        }
      },
      changeFun (val) {
        this.cheeckedDatas = val
        this.$emit('getCheckedRows', val)
      },
      getCheckedRows () {
        return this.cheeckedDatas
      },
      rowClick (row) {
        this.$emit('getClickRows', row)
      },
      // 构建参数
      createParam (outerSearchParam) {
        let param1 = {}
        if (this.param.urlParam != null) {
          for (let key of Object.keys(this.param.urlParam)) {
            param1[key] = this.param.urlParam[key]
          }
        }
        if (outerSearchParam != null && outerSearchParam !== undefined) {
          for (let key1 of Object.keys(outerSearchParam)) {
            param1[key1] = outerSearchParam[key1]
          }
        }
        if (this.searchValue == null || this.searchValue === '') {
          return param1
        }
        if (this.param.showSearch || this.param.showToolBar) {
          if (this.searchtype === '0') {
            param1.all = this.searchValue
          } else {
            param1[this.searchtype] = this.searchValue
          }
        }
        return param1
      }
    }
  }
</script>

<style >
  .el-input-group .el-select .el-input {
    width: 100px;
  }

</style>
